<template>
  <div class="login">
    <!-- <div> -->
    <div class="login-title">
      <!-- <img
        src="../../assets/src-HuiFu_logo.png"
        width="200px"
        style="vertical-align: middle;margin:0px 0px 12px 0px;"
      /> -->
      <span class="login-title-text"
        >广 深 高 速 公 路 智 能 监 控 分 析 系 统</span
      >
      <!--      <span style="color: rgb(232, 236, 238);font-size: 1.5rem;"><br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Version 1.3.0</span> -->
    </div>
    <div class="login-container">
      <img src="../../assets/logincontainer.png" width="500px" height="500px" />
      <div class="login-con">
        <Card icon="log-in" :bordered="false">
          <p slot="title" style="font-size:21px;margin-top:40px;">欢迎登录</p>
          <div class="form-con">
            <login-form @on-success-valid="handleSubmit"></login-form>
          </div>
        </Card>
      </div>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
import LoginForm from "./login-form";
import { mapActions } from "vuex";
export default {
  components: {
    LoginForm
  },
  methods: {
    ...mapActions(["handleLogin"]),
    handleSubmit({ userName, password }) {
      let LoginParams = {
        username: userName,
        password: password
      };
      console.log(LoginParams);
      // console.log("password:" + LoginParams.password);
      this.handleLogin(LoginParams)
        .then(res => {
          window.sessionStorage.setItem("tempFlag_home", "false");
          window.sessionStorage.setItem("tempFlag_monitor", "false");
          window.sessionStorage.setItem("tempFlag_events", "false");
          window.sessionStorage.setItem("tempFlag_analysis", "false");
        })
        .then(res => {
          this.$router.push({ name: "home" });
        })
        .catch(err => {
          this.$Message.error({
            content: err,
            duration: 3
          });
        });
    }
  }
};
</script>

<style lang="less">
@import "./login.less";
</style>
